<template>
  <page-header-wrapper>
    <div class="top-header" style="background: #fff;">
      <a-tabs
        v-model:activeKey="vdata.selectedKeys"
        :tab-position="'top'"
        @tabClick="menuClick"
      >
        <a-tab-pane v-for="item in vdata.activityType" :key="item.activityTypeId" :tab="item.activityTypeName" />
      </a-tabs>
    </div>
    <GzCard
      ref="infoCard"
      style="margin-top: 20px;"
      :reqCardListFunc="reqCardListFunc"
      :span="{ xxl: 6, xl: 4, lg: 4, md: 3, sm: 2, xs: 1 }"
      :height="300"
      :addAuthority="false"
    >
      <template #cardContentSlot="{record}">
        <div class="gz-card-content">
          <div class="img-div">
            <img v-if="record.templateImg" :src="record.templateImg" style="width: 100%;height: 200px;object-fit: cover;">
            <img v-else src="@/assets/svg/default-img.svg" style="width: 200px;height: 200px;">
          </div>
          <!-- 卡片底部操作栏 -->
          <div class="gz-card-ops">
            <span style="margin-right: 15px;">{{ record.templateName }}</span>
            <!-- <a style="padding: 0 6px 0 6px;box-sizing: border-box;" class="a-class" @click="tryFunc(record)">试用</a> -->
            <a v-if="$access('ENT_ACTIVITY_CREATE_INFO_ADD')" class="a-class" @click="createActive(false,record)">创建</a>
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                <ellipsis-outlined class="a-class" style="font-size: 20px;" />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item v-if="$access('ENT_ACTIVITY_CREATE_INFO_SETTING_VIDEO')" key="1">
                    <a class="a-class" :href="record.settingVideoUrl" target="_blank" rel="noopener noreferrer" @click="() => { !record.settingVideoUrl && $infoBox.message.warn('暂无配置视频') }">配置视频</a>
                  </a-menu-item>
                  <a-menu-item v-if="$access('ENT_ACTIVITY_CREATE_INFO_PROCESS_VIDEO')" key="2">
                    <a class="a-class" :href="record.participateVideoUrl" target="_blank" rel="noopener noreferrer" @click="() => { !record.settingVideoUrl && $infoBox.message.warn('暂无流程视频') }">流程视频</a>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </template>
    </GzCard>
    <!-- 试用 -->
    <a-modal v-model:visible="vdata.visible" :maskClosable="false" title="活动试用二维码" :footer="null">
      <div style="display: flex;align-items: center;flex-direction: column;">
        <h3>{{ vdata.templateName }}试用二维码</h3>
        <a-image :src="vdata.previewImg" :width="200" />
      </div>
    </a-modal>

    <!-- 创建活动 -->
    <component :is="vdata.templateCom" ref="templateComRef" :callbackFunc="refCardList" />
  </page-header-wrapper>
</template>

<script lang="ts" setup>
import{$getInvestorList,$getActivityTypeList,$getActiveTemplateList} from '@/api/activityManage/activityCreate/index'
import { ref,reactive,getCurrentInstance, provide, nextTick } from 'vue'
import ACTE001 from './ACTE001/index.vue'
import ACTE002 from './ACTE002/index.vue'
import ACTE003 from './ACTE003/index.vue'
import ACTE004 from './ACTE004/index.vue'
import ACTE005 from './ACTE005/index.vue'
import ACTE007 from './ACTE007/index.vue'
import ACTE008 from './ACTE008/index.vue'
import ACTE017 from './ACTE017/index.vue'
import ACTE018 from './ACTE018/index.vue'
import ACTE019 from './ACTE019/index.vue'
import ACTE022 from './ACTE022/index.vue'
import ACTE023 from './ACTE023/index.vue'
import ACTE024 from './ACTE024/index.vue'
import ACTE025 from './ACTE025/index.vue'
import ACTE027 from './ACTE027/index.vue'
import ACTE028 from './ACTE028/index.vue'
import ACTE029 from './ACTE029/index.vue'

/**
 * 模板组件
 */
const templateComponents = {
  ACTE001,  // 大转盘-商家版
  ACTE002,  // 码上邮喜 // ABC裂变
  ACTE003,  // 预约有礼
  ACTE004, // 扫码领券
  ACTE005,  // 转介活动
  ACTE006: ACTE004, // 扫码派券
  ACTE007,  // 预约达标
  ACTE008,  // 大转盘-消费者版
  ACTE009: ACTE001, // 刮刮乐-商家版
  ACTE010: ACTE008, // 刮刮乐-消费者版
  ACTE011: ACTE001, // 砸金蛋-商家版
  ACTE012: ACTE008, // 砸金蛋-消费者版
  ACTE013: ACTE001, // 翻翻乐-商家版
  ACTE014: ACTE008, // 翻翻乐-消费者版
  ACTE015: ACTE005, // 满减-微信
  ACTE016: ACTE005, // 随机减-微信
  ACTE017,  // 越减越便宜升级版
  ACTE018,  //拉新有利
  ACTE019,  // 引导实名
  ACTE020: ACTE005, // 满减-支付宝
  ACTE021: ACTE005, // 随机减-支付宝
  ACTE022,//定向派券
  ACTE023,//一次性派发积分活动
  ACTE024,//助力活动
  ACTE025,  // 会员福利
  ACTE027,  // 老客唤醒
  ACTE028,//商户资产提升
  ACTE029,//马上有福
}

const { $infoBox,$access } = getCurrentInstance()!.appContext.config.globalProperties

const infoCard = ref()
const templateComRef = ref()

const vdata:any = reactive ({
  templateCom: null, // 动态组件
  visible: false, // 试用弹框状态
  activityType: [], // 活动类型
  templateName: '',  // 试用模板名称
  selectedKeys: 0,
  gzCard: {
    addAuthority: $access('ENT_DEVICE_QRC_SHELL_ADD')
  },
  previewImg: '', // 预览图
})

function menuClick(e){
  refCardList(e)
}

function tryFunc(record){ // 试用模板
  vdata.templateName = record.templateName
  vdata.previewImg = record.previewImg
  vdata.visible = true
}

/**
 * 获取出资方列表
 */
const payAuthList = ref([])
function getPayAuthList() {
  $getInvestorList({ pageSize: 100 }).then((result) => {
    payAuthList.value = result.records
  })
}
getPayAuthList()
function createActive(activityId,record){  // 创建活动
  if(!JSON.stringify(templateComponents).includes(record.activityTemplateNo)){
    $infoBox.message.warn('暂不支持该活动类型')
    return
  }
  vdata.templateCom = templateComponents[record.activityTemplateNo]
  nextTick(() => {
    templateComRef.value.show(activityId,record,payAuthList.value,false)
  })
  // interactiveGameRef.value.show(activityId,record.activityTemplateId,record.activityCode,record.templateName,false)
}

const templateList = ref([])
// 活动模板
async function  reqCardListFunc (activityTypeId) {
  if(templateList.value?.length){
    if(!activityTypeId){
      return templateList.value
    }
    return templateList.value.filter(item => item.activityTypeId === activityTypeId)
  }
  const res = await $getActiveTemplateList({ pageSize: 50 })
  templateList.value = res.records
  return res.records
}
// 刷新card列表
function refCardList (activityTypeId) {
  infoCard.value.refCardList(activityTypeId)
}

provide('listPageSearchFunc', refCardList)

// 请求活动类型数据
$getActivityTypeList({}).then(res=>{
  vdata.activityType = res.records
  vdata.activityType.unshift({ activityTypeId: 0, activityTypeName: '全部' })
})
</script>

<style lang="less" scoped>
  .ant-btn{
    padding: 0 !important;
  }
  .a-class{
    color: rgba(0, 0, 0, 0.65);
    &:hover{
      color: #67c23a;
    }
  }
  .top-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .gz-card-content {
    position: relative;
    background-color: @gz-card-back;
    border-radius: 6px;
    overflow:hidden;
    background-color: whitesmoke;

    .img-div{
      display: flex;
      justify-content: center;
    }
  }
  .gz-card-ops {
    width: 100%;
    height: 50px;
    background-color: @gz-card-back;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    border-top: 1px solid @gz-back;
  }
  :deep(.ant-tabs-nav){
    margin: 0;
  }
</style>
